import React, { useState } from 'react';
import './Template_waterfall_flow.scss'
import WaterfallGallery from './WaterfallGallery';
import { Switch } from 'antd';
import { ArrowDown, ArrowUp } from '@react-vant/icons';
// 示例图片数据
const sampleImages = [
    {
        id: 1,
        src: 'https://gd-filems.dancf.com/gaoding/gaoding/33741/553d6e79-5f9f-4201-9826-262448ebd5706916.png?x-oss-process=image/resize,w_400,type_6/sharpen,120/interlace,1/format,webp',
        width: 800, height: 1300
    },
    {
        id: 2,
        src: 'https://gd-filems.dancf.com/gaoding/gaoding/53357/4b046ca0cef44f108fba70d43c92607d.jpg?x-oss-process=image/resize,w_400,type_6/sharpen,120/interlace,1/format,webp'
        , width: 800, height: 1500
    },
    {
        id: 3,
        src: 'https://gd-filems.dancf.com/gaoding/gaoding/53357/e760850a6dac458caf1bc13ff5b1dcfa.gif?x-oss-process=image/resize,w_400,type_6/sharpen,120/interlace,1/format,webp',
        width: 800, height: 1300
    },
    {
        id: 4,
        src: 'https://gd-filems.dancf.com/gaoding/gaoding/74244/4c2d59928a5f49bd8bb82776e7474cf0.jpg?x-oss-process=image/resize,w_400,type_6/sharpen,120/interlace,1/format,webp',
        width: 800, height: 1500
    },
    {
        id: 5,
        src: 'https://st-gdx.dancf.com/gaodingx/0/uxms/design/20210827-144607-717b.png?x-oss-process=image/resize,w_400,type_6/sharpen,120/interlace,1/format,webp',
        width: 800, height: 1300
    },
    {
        id: 6,
        src: 'https://gd-filems.dancf.com/193448954/composite-preview/20250513-205514-Bad40.jpg?x-oss-process=image/resize,w_400,type_6/sharpen,120/interlace,1/format,webp',
        width: 800, height: 1500
    },
    {
        id: 7,
        src: 'https://gd-filems.dancf.com/gaoding/gaoding/29681/5082d28ad21f480c81b7dab07dee1c97.jpg?x-oss-process=image/resize,w_400,type_6/sharpen,120/interlace,1/format,webp',
        width: 800, height: 1300
    },
    {
        id: 8,
        src: 'https://gd-filems.dancf.com/gaoding/gaoding/53357/8a1362435c4044a6b3b941e20bf05633.jpg?x-oss-process=image/resize,w_400,type_6/sharpen,120/interlace,1/format,webp',
        width: 800, height: 1500
    },
    {
        id: 9,
        src: 'https://gd-filems.dancf.com/gaoding/gaoding/72176/e3618d84-dc6d-4127-8cf3-d67a29bb8ef728111.jpg?x-oss-process=image/resize,w_400,type_6/sharpen,120/interlace,1/format,webp',
        width: 800, height: 1300
    },
    {
        id: 10,
        src: 'https://st0.dancf.com/02/cms/202405080958-b431.jpg?x-oss-process=image/resize,w_400,type_6/sharpen,120/interlace,1/format,webp',
        width: 800, height: 1300
    },
    {
        id: 1,
        src: 'https://gd-filems.dancf.com/gaoding/gaoding/02376/ad5580d8-272e-40e7-944a-f6bf942823a851544.jpg?x-oss-process=image/resize,w_400,type_6/sharpen,120/interlace,1/format,webp',
        width: 800, height: 1500
    },
    {
        id: 2,
        src: 'https://gd-filems.dancf.com/gaoding/gaoding/29681/d9f8e08c753b4b8e92d16a86e40aaddb.jpg?x-oss-process=image/resize,w_400,type_6/sharpen,120/interlace,1/format,webp',
        width: 800, height: 1500
    },
    {
        id: 3,
        src: 'https://gd-filems.dancf.com/193403486/composite-preview/20250513-195758-ioKOv.jpg?x-oss-process=image/resize,w_400/crop,w_400,h_1000,g_north,type_6/sharpen,120/interlace,1/format,webp',
        width: 800, height: 1500
    },
    {
        id: 4,
        src: 'https://gd-filems.dancf.com/gaoding/gaoding/53357/e580e504e13948e784d8a6c4c52249c1.gif?x-oss-process=image/resize,w_400,type_6/sharpen,120/interlace,1/format,webp',
        width: 800, height: 1500
    },
    { id: 5, src: 'https://picsum.photos/id/5/800/800', width: 800, height: 1300 },
    { id: 6, src: 'https://picsum.photos/id/6/800/1100', width: 800, height: 1500 },
    { id: 7, src: 'https://picsum.photos/id/7/800/750', width: 800, height: 1300 },
    { id: 8, src: 'https://picsum.photos/id/8/800/950', width: 800, height: 1500 },
    { id: 9, src: 'https://picsum.photos/id/9/800/650', width: 800, height: 1300 },
    { id: 10, src: 'https://picsum.photos/id/10/800/1050', width: 800, height: 1050 },
    { id: 1, src: 'https://picsum.photos/id/1/800/1000', width: 800, height: 1300 },
    { id: 2, src: 'https://picsum.photos/id/2/800/600', width: 800, height: 1500 },
    { id: 3, src: 'https://picsum.photos/id/3/800/900', width: 800, height: 1300 },
    { id: 4, src: 'https://picsum.photos/id/4/800/700', width: 800, height: 1500 },
    { id: 5, src: 'https://picsum.photos/id/5/800/800', width: 800, height: 1300 },
    { id: 6, src: 'https://picsum.photos/id/6/800/1100', width: 800, height: 1500 },
    { id: 7, src: 'https://picsum.photos/id/7/800/750', width: 800, height: 1300 },
    { id: 8, src: 'https://picsum.photos/id/8/800/950', width: 800, height: 1500 },
    { id: 9, src: 'https://picsum.photos/id/9/800/650', width: 800, height: 1300 },
    { id: 10, src: 'https://picsum.photos/id/10/800/1050', width: 800, height: 1050 },
];

const Template_waterfall_flow: React.FC = () => {
    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
    const [isDropdownOpen1, setIsDropdownOpen1] = useState(false);
    const [isDropdownOpen2, setIsDropdownOpen2] = useState(false);
    return (
        <div style={{ width: '1350px', marginTop: '30px' }}>
            <hr style={{ marginTop: '-10px' }} />
            <div className="layout-container">
                {/* 排序部分 */}
                <div className="sorting-section">
                    <span className="sorting-option">综合排序</span>
                    <span className="sorting-option_new">
                        最新上传
                        <span className="new-badge">New</span>
                    </span>
                    <span className="sorting-option">最多下载</span>
                </div>
                {/* 筛选部分 */}
                <div className="filter-section">
                    <span className="color-filter-container ">
                        <div className="color-filter-trigger" onClick={() => setIsDropdownOpen(!isDropdownOpen)}>
                            <span>颜色</span>
                            {/* 下拉箭头，这里简单用符号表示，也可换为图标 */}
                            {isDropdownOpen ? <ArrowUp /> : <ArrowDown />}
                        </div>
                        {isDropdownOpen && (
                            <div className="color-filter-dropdown">
                                {/* 这里可添加具体颜色选项，例如 */}
                                <div className="color-option" style={{ background: '#E54941' }}></div>
                                <div className="color-option" style={{ background: '#F47B20' }}></div>
                                <div className="color-option" style={{ background: '#FBD74B' }}></div>
                                <div className="color-option" style={{ background: '#4CD964' }}></div>
                                <div className="color-option" style={{ background: '#007AFF' }}></div>
                                <div className="color-option" style={{ background: 'blue' }}></div>
                                <div className="color-option" style={{ background: '#DA70D6' }}></div>
                                <div className="color-option" style={{ background: '#FF69B4' }}></div>
                                <div className="color-option" style={{ background: '#A0522D' }}></div>
                                <div className="color-option1" style={{ background: '#FFFFFF' }}></div>
                                <div className="color-option" style={{ background: '#C0C0C0' }}></div>
                                <div className="color-option" style={{ background: '#000000' }}></div>

                            </div>
                        )}
                    </span>
                    <div className='filter-container2'>
                        <span className="filter-option2" onClick={() => setIsDropdownOpen1(!isDropdownOpen1)}>
                            <span>风格</span>
                            {isDropdownOpen1 ? <ArrowUp /> : <ArrowDown />}
                        </span>
                        {isDropdownOpen1 && (
                            <div className="color-filter-dropdown">
                                <span>插画</span><span>合成</span><span>排版</span><span>3D</span><span>奢华</span><span>商务</span>
                                <span>时尚</span><span>实景</span><span>科技</span><span>复古</span><span>现代</span><span>潮流</span>
                                <span>酷炫</span><span>趣味</span><span>可爱</span><span>卡通</span><span>文艺</span><span>清新</span>
                                <span>温馨</span><span>促销</span><span>喜庆</span><span>政务</span><span>中国风</span><span>酸性风</span>
                                <span>漫画风</span><span>扁平风</span><span>简约</span><span>孟菲斯</span><span>励志</span>
                            </div>
                        )}
                    </div>
                    <div className='filter-container3'>
                        <span className="filter-option3" onClick={() => setIsDropdownOpen2(!isDropdownOpen2)}>
                            <span>版式</span>
                            {isDropdownOpen2 ? <ArrowUp /> : <ArrowDown />}
                        </span>
                        {isDropdownOpen2 && (
                            <div className="color-filter-dropdown">
                                <span>横版</span>
                                <span>竖版</span>
                                <span>方形</span>
                                <span>4:3</span>
                                <span>3:4</span>
                            </div>
                        )}
                    </div>
                    <span>
                        <Switch size="small" />
                        <label className="checkbox-label">只看套装</label>
                        <label className="checkbox-label">只看套装</label>
                    </span>
                </div>
            </div>
            <WaterfallGallery
                images={sampleImages}
                columnMinWidth={170}
                gap={20}
            />
        </div>
    );
};

export default Template_waterfall_flow;  